import { useStorage } from "./hooks/useStorage";
import React, { useState, useDeferredValue } from "react";
import "./App.css";
import { Input, List, Flex } from "antd";
import Item from "antd/es/list/Item";
import mockjs from "mockjs";

interface Item {
  id: number;
  name: number;
  address: string;
}

function App() {
  const [inputValue, setInputValue] = useState("");
  const [list] = useState<Item[]>(() => {
    return mockjs.mock({
      "list|10000": [
        {
          "id|+1": 1,
          name: '@natural',
          "address|1": "@county(true)",
        },
      ],
    }).list;
  });
  const deferredQuery = useDeferredValue(inputValue);
  const isStale = deferredQuery !== inputValue // 检查是否为延迟状态
  const findItem = () => {
    console.log(deferredQuery,"---------",inputValue)
    return list.filter((item) => item.name.toString().includes(deferredQuery));
  };

  return (
    <>
      <Flex>
        <Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          type="text"
        />
      </Flex>

      <List style={{opacity: isStale ? '0.2' : '1', transition: 'all 1s'}}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta title={item.name} description={item.address} />
          </List.Item>
        )}
        dataSource={findItem()}
      ></List>
    </>
  );
}

export default App;
